<template>
  <div>
    <div style="margin-bottom: 20px">
      <el-button type="primary" @click="addSort">新增分类</el-button>
    </div>
    <el-table
      :data="sortInfo"
      border
      class="table"
      header-cell-class-name="table-header"
      ref="tableRef"
      @row-click="handelClick"
    >
      <el-table-column
        prop="sortName"
        label="分类名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="sortDescription"
        label="分类描述"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" width="380" align="center">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-edit" @click.stop="editSort(scope.row)">编辑分类</el-button>
          <el-button type="text" icon="el-icon-delete" style="color: var(--orangeRed)"
                     @click.stop="deleteHandle(scope.row.sortId)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="分类"
      :visible.sync="sortDialog"
      width="30%"
      :before-close="handleClose"
      :append-to-body="true"
      destroy-on-close
      center
    >
      <div class="my-dialog">
        <el-input placeholder="请输入分类名称" v-model="sortForHttp.sortName">
          <template slot="prepend">分类名称</template>
        </el-input>
        <el-input placeholder="请输入分类描述" v-model="sortForHttp.sortDescription">
          <template slot="prepend">分类描述</template>
        </el-input>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose()">取 消</el-button>
        <el-button type="primary" @click="saveSortEdit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sortDialog: false,
      labelDialog: false,
      sortInfo: [],
      sort: {},
      sortForHttp: {
        sortId: null,
        sortName: "",
        sortDescription: "",
      },
      labelForHttp: {
        id: null,
        sortId: null,
        labelName: "",
        labelDescription: "",
      },
      sortPageDTO: {
        current: 1,
        size: 10,
      },
    };
  },
  computed: {},

  watch: {},

  created() {
    this.getSortInfo();
  },

  mounted() {
  },

  methods: {
    deleteHandle(id) {
      let param = {
        id: id,
      };
      this.$confirm("确认删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        center: true,
      }).then(() => {
        this.$createHttp.sortDelete(param).then((res) => {
          if (res.code === 200) {
            this.$message({
              message: "删除成功！",
              type: "success",
            });
            this.getSortInfo();
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        });
      });
    },
    saveSortEdit() {
      if (
        this.$common.isEmpty(this.sortForHttp.sortName) ||
        this.$common.isEmpty(this.sortForHttp.sortDescription)
      ) {
        this.$message({
          message: "请完善所有分类信息！",
          type: "error",
        });
        return;
      }
      if (this.sortForHttp.sortId) {
        this.$createHttp.updateSort(this.sortForHttp).then((res) => {
          if (res.code === 200) {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.sortDialog = false;
            setTimeout(() => {
              this.getSortInfo();
            });
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        });
      } else {
        this.$createHttp.addSort(this.sortForHttp).then((res) => {
          if (res.code === 200) {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.sortDialog = false;
            setTimeout(() => {
              this.getSortInfo();
            });
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        });
      }
    },
    editSort(sort) {
      this.sortDialog = true;
      this.sortForHttp.sortId = sort.sortId;
      this.sortForHttp.sortName = sort.sortName;
      this.sortForHttp.sortDescription = sort.sortDescription;
    },
    addSort() {
      this.sortDialog = true;
      this.sortForHttp.sortId = null;
      this.sortForHttp.sortName = "";
      this.sortForHttp.sortDescription = "";
    },
    handelClick(option) {
      this.$router.push({
        path: '/label',
        query: {
          id: option.sortId,
          name: option.sortName
        }
      })
    },
    handleClose() {
      this.sortForHttp = {
        sortId: null,
        sortName: "",
        sortDescription: "",
      };
      this.sortDialog = false;
    },

    getSortInfo() {
      this.$createHttp.sortPage(this.sortPageDTO).then((res) => {
        if (res.code === 200) {
          this.sortInfo = res.data.records;
          this.sortPageDTO.total = res.data.total;
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.my-dialog > div {
  margin: 12px;
}

.my-dialog >>> input::-webkit-inner-spin-button {
  appearance: none;
}
</style>
